Skip to content

feat(dashboards): Add ESC key to dismiss widget builder slideout#112186

Merged
NicoHinderling merged 5 commits intomasterfrom
nicolashinderling/feat/esc-dismiss-widget-builder
Apr 7, 2026
Merged

feat(dashboards): Add ESC key to dismiss widget builder slideout#112186
NicoHinderling merged 5 commits intomasterfrom
nicolashinderling/feat/esc-dismiss-widget-builder

Conversation

@NicoHinderling
Copy link
Copy Markdown
Contributor

Pressing Escape while the widget builder slideout is open now triggers the same close flow as the Close button. If there are unsaved changes, the confirmation modal appears; otherwise the panel closes immediately.

Previously there was no keyboard shortcut to dismiss the slideout — you had to click the Close or Cancel buttons.

Pressing Escape while the widget builder slideout is open now triggers
the same close flow as the Close button, including the unsaved-changes
confirmation modal when edits are pending.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Apr 2, 2026
@NicoHinderling NicoHinderling marked this pull request as ready for review April 2, 2026 23:23
@NicoHinderling NicoHinderling requested a review from a team as a code owner April 2, 2026 23:23
Comment thread static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx Outdated
Comment thread static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx Outdated
The document-level keydown listener for Escape fired even when the
confirmation modal was open, causing it to immediately reopen after
being dismissed — trapping the user in a loop. Check global modal
visibility and defaultPrevented before triggering the close handler.

Co-Authored-By: Claude Opus 4.6 <noreply@example.com>
});
}, [initialState, onClose, state]);

useEffect(() => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace raw useEffect + addEventListener with the useHotkeys hook from
@sentry/scraps/hotkey, matching the pattern used by the global drawer.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The useHotkeys refactor accidentally removed useEffect from the React
import while it's still used elsewhere in the component, causing a
ReferenceError crash when opening the widget builder.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copy link
Copy Markdown
Contributor

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 8dd2884. Configure here.

useHotkeys calls preventDefault before the callback, so when the
confirmation modal is open the event gets swallowed before GlobalModal
can handle it. Use skipPreventDefault and call preventDefault only
when we actually close the slideout.
@NicoHinderling NicoHinderling merged commit ab65c60 into master Apr 7, 2026
64 checks passed
@NicoHinderling NicoHinderling deleted the nicolashinderling/feat/esc-dismiss-widget-builder branch April 7, 2026 20:21
george-sentry pushed a commit that referenced this pull request Apr 9, 2026
…2186)

Pressing Escape while the widget builder slideout is open now triggers
the same close flow as the Close button. If there are unsaved changes,
the confirmation modal appears; otherwise the panel closes immediately.

Previously there was no keyboard shortcut to dismiss the slideout — you
had to click the Close or Cancel buttons.

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 <noreply@example.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants